import React, { memo, useState } from "react"

type GreetingProps = {
  name: string
}

const Greeting: React.FC<GreetingProps> = memo(({ name }) => {
  console.log("Greeting was rendered at", new Date().toLocaleTimeString())
  return (
    <h3>
      Hello{name && ", "}
      {name}!
      <br />
      {`only when you type in the Name filed, I'll rerender` +
        new Date().toLocaleTimeString()}
    </h3>
  )
})

export default function MyApp() {
  const [name, setName] = useState<string>("")
  const [address, setAddress] = useState<string>("")

  return (
    <>
      <label>
        Name{": "}
        <input value={name} onChange={(e) => setName(e.target.value)} />
      </label>
      <label>
        Address{": "}
        <input value={address} onChange={(e) => setAddress(e.target.value)} />
      </label>
      <Greeting name={name} />
    </>
  )
}
